import { Graph, Shape } from "@antv/x6";
import { Snapline } from '@antv/x6-plugin-snapline'
import { Selection } from "@antv/x6-plugin-selection";
import { Transform } from '@antv/x6-plugin-transform';
import { MiniMap } from "@antv/x6-plugin-minimap";

function initEnvent(graph) {
    graph.on("node:added", ({ node, index, options }) => {
        console.log("node added", node, index, options, node.getData());
    });

    graph.on('node:resizing', ({ cell, e, x, y, node, view }) => {
        console.log("height", view.selectors.foContent.firstChild.clientHeight);
        const size = node.getProp("size");
        console.log("node:resizing", size.width, size.height);
        if (Math.abs(view.selectors.foContent.firstChild.clientHeight - size.height) < 10) {
            return;
        }
        node.setProp('size', { width: size.width, height: view.selectors.foContent.firstChild.clientHeight })
    })

    graph.on('edge:added', ({ edge, index, options }) => {
        console.log("edge:added", edge, index, options);
    })


    graph.on('edge:dblclick', ({ cell }) => {
        cell.addTools('vertices', 'onhover')
    })
    graph.on('edge:contextmenu', ({ e, cell }) => {
        console.log("edge:contextmenu");
        if (cell.hasTools('onhover')) {
            e.stopPropagation();
            cell.removeTools()
        }
    })
}

function registerPlugin(graph) {
    graph.use(
        new Selection({
            enabled: true,
            multiple: true,
            rubberband: true,
            movable: true,
            showNodeSelectionBox: true,
        })
    );

    graph.use(new Transform({
        resizing: {
            enabled: true,
            orthogonal: true,
            allowReverse: true,
            autoScroll: true,
            restrict: false,
            preserveAspectRatio: false,
        },
        rotating: false,
    }));

    graph.use(
        new Snapline({
            enabled: true,
            sharp: true,
        }),
    )

    let miniMapContainer = document.getElementById("er-table-minimap-container");
    if (miniMapContainer) {
        graph.use(
            new MiniMap({
                container: miniMapContainer,
                width: 200,
                height: 200,
                padding: 3,
            })
        );
    }
}

export function createErGraph(graphContainer) {
    let graph = new Graph({
        container: graphContainer,
        autoResize: true,
        grid: {
            visible: true,
        },
        panning: {
            enabled: true,
            modifiers: ["ctrl"]
        },
        mousewheel: {
            enabled: true,
        },
        background: {
            color: "rgb(222 242 214 / 98%)",
        },
        resizing: {
            enabled: true
        },
        connecting: {
            router: {
                name: 'er',
                args: {
                    offset: 25,
                    direction: 'H',
                },
            },
            allowBlank: false,
            allowNode: false,
            createEdge() {
                return new Shape.Edge({
                    attrs: {
                        line: {
                            stroke: '#A2B1C3',
                            strokeWidth: 2,
                        },
                    },
                    labels: [
                        {
                            attrs: { label: { text: "edge label" } },
                        },
                    ],
                })
            },
        },
        highlighting: {
            embedding: {
                name: "stroke",
                args: {
                    padding: 2,
                    attrs: {
                        "stroke-width": 2,
                        stroke: "red",
                    },
                },
            },
        },
        interacting: true
    });
    registerPlugin(graph);
    initEnvent(graph);
    return graph;
}